<template>
  <div class="app-container" style="padding: 30px">
    <div class="function-lan" style="width: 100%">
      <label for="list" style="margin-right: 10px">BannerID:</label>
      <div class="search-for">
        <el-input
          class="search-for-ipt"
          clearable
          @clear="getList"
          prefix-icon="el-icon-search"
          v-model="search"
          placeholder="请输入关键字进行模糊搜索"
        ></el-input>
      </div>
      <!-- 搜索按钮 -->
      <div class="search-btn" @click="searchFor">
        <Buttons :text="text1"></Buttons>
      </div>
      <div class="add-new-manager"></div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 40px"
    >
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :formatter="dateFormat"
        align="center"
        label="Date"
        prop="create_time"
      >
      </el-table-column>
      <el-table-column label="Importance">
        <template slot-scope="scope">
          <el-rate
            :max="5"
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            :low-threshold="1"
            :high-threshold="5"
            v-model="scope.row.play"
            :disabled="true"
          ></el-rate>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="Status">
        <template slot-scope="{ row }">
          <el-tag :type="row.status | statusFilter">
            {{ row.status === 1 ? "已启用" : "已禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column min-width="300px" label="Title">
        <template slot-scope="{ row }">
          <router-link :to="'/nested/banner/edit/' + row.id" class="link-type">
            <span>{{ row.title }}</span>
          </router-link>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="Actions">
        <template slot-scope="scope">
          <router-link :to="'/nested/banner/edit/' + scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              编辑
            </el-button>
          </router-link>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            style="margin-left: 10px"
            @click="removeBannerById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_number"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Buttons from "@/components/button/index.vue";
import { fetchList, removeBanner, getBannerTotal } from "@/api/article";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { checkPermission } from "@/utils/hasPermission";
export default {
  name: "ArticleList",
  components: { Pagination, Buttons },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      text1: "搜索",
      total: 0,
      listLoading: true,
      listQuery: {
        page_number: 1,
        page_size: 20
      },
      search: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermission,
    async getList() {
      let self = this;
      this.listLoading = true;
      const response = await fetchList(this.listQuery);
      this.list = response.result;
      console.log(response);
      const res = await getBannerTotal();
      this.total = res.result[0].numbers;
      // let list = self.list.filter((item, index) =>
      //   item.title.includes(self.search)
      // );
      // console.log(list);
      // self.list = list.filter(
      //   (item, index) =>
      //     index < self.listQuery.page_number * self.listQuery.page_size &&
      //     index >= self.listQuery.page_size * (self.listQuery.page_number - 1)
      // );
      // console.log(res);
      this.listLoading = false;
    },
    // 时间格式化
    dateFormat(row, column) {
      // dateFormat();
      // console.log(row, column);
      var date = row[column.property];
      if (date == undefined) return "";
      return this.$moment.unix(date).format("YYYY-MM-DD HH:mm:ss");
    },
    searchFor() {
      let self = this;
      self.listLoading = true;
      let reg = new RegExp(self.search.trim(), "i");
      let resArr = [];
      self.list.filter(item => {
        for (let i in item) {
          // console.log(item[i]);
          if (reg.test(item[i])) {
            resArr.push(item);
          }
        }
      });
      // 去重
      const res = new Map();
      setTimeout(() => {
        this.list = resArr.filter(arr => {
          return !res.has(arr.id) && res.set(arr.id, 1);
        });
        self.total = this.list.length;
        self.listLoading = false;
      }, 1.5 * 1000);
    },
    async removeBannerById(id) {
      if (!this.checkPermission()) return;
      let self = this;
      const confirmResult = await self
        .$confirm("此操作将永久删除该Banner, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .catch(err => err);
      if (confirmResult !== "confirm") {
        return self.$message.info("已经取消删除");
      }
      const res = await removeBanner(id);
      if (res.code !== 1) {
        return self.$message.error("删除Banner失败！");
      }

      self.$message.success("删除Banner成功！");
      self.getList();
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.search-for-ipt{
  width: 250px;
}
</style>
